<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>投诉举报</title>
	<script src="../js/header.js"></script>
	<style type="text/css">
		html, body, #app {
			padding: 0px;
			margin: 0px;
			/*height: 100%;*/
		}
		#app{
			border-top: 3px solid #0D9AFF;
			padding: 25px;
			/*background-attachment: fixed;*/
			/*overflow: hidden;*/
		}
		.tab-title{
			font-size: 16px;
			font-weight: bold;
			border-left: 4px solid #0D9AFF;
			font-family: PingFangSC-Medium;
			padding-left:10px;
			margin-bottom: 20px;
		}
		.el-dialog__footer {
			padding: 10px 20px 20px;
			text-align: center;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
		.el-dialog__body {
			color: rgb(96, 98, 102);
			font-size: 14px;
			word-break: break-all;
			padding: 0px 20px;
		}
		#excel {
			display: none;
		}
		.el-input__inner {
			-webkit-appearance: none;
			background-color: #FFF;
			background-image: none;
			border-radius: 4px;
			border: 1px solid #DCDFE6;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			color: #606266;
			display: inline-block;
			font-size: inherit;
			height: 30px;
			line-height: 30px;
			outline: 0;
			padding: 0 15px;
			-webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
			transition: border-color .2s cubic-bezier(.645,.045,.355,1);
		}
		/*#app .el-input,
		#app .el-select,
		#app .el-input-number{
			width: 100%;
		}*/
		.listed .el-form-item__label{
			letter-spacing: 3px;
		}
		.el-select ,.el-date-editor.el-input, .el-date-editor.el-input__inner {
			width: 100%;
		}
		/*.el-textarea {
			width: 95%;
		}*/

		/* 搜索按钮样式修改 */
		#app .el-button.is-circle.search_btn{
			position: absolute;
			right: 0;
			top: 0;
			border: 0;
			background: none;
		}
		#app .el-button.is-circle.search_btn i{
			font-size: 17px;
		}
		.pagination {
			text-align: center;
			margin-top: 30px;
		}
	</style>
</head>

<body>
<div v-cloak id="app">
	<el-form :model="Detail" :rules="rules" ref="Detail" label-width="140px">
		<el-row>
			<el-col :span="4" class="tab-title">
				投诉举报
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="8">
				<el-form-item label="姓名:"  prop="name" label-width="120px">
					<el-input v-model="Detail.name"  placeholder=""  disabled></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="9">
				<el-form-item label="性别:" prop="sex" label-width="190px">
					<el-radio-group v-model="Detail.sex">
					    <el-radio label="男">男</el-radio>
					    <el-radio label="女">女</el-radio>
					 </el-radio-group>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="8">
				<el-form-item label="联系电话:"  prop="phone" label-width="120px">
					<el-input v-model="Detail.phone"  placeholder="" ></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="14">
				<el-form-item label="通讯地址:" required label-width="190px">
                    <el-col :span="4">
						<el-form-item prop="province">
                            <el-select v-model="Detail.province" placeholder="请选择省" @change="chooseProvince" style="">
                                <el-option
						    		v-for="item in provinceData"
						    		:key="item.code"
						    		:label="item.name"
						    		:value="item.name">
								</el-option>
							</el-select>
                        </el-form-item>
                    </el-col>
                    <el-col span="0.5" style="color: rgb(192, 204, 218);text-align: center;">
						<span style="color: #C0CCDA;;">—</span>
                    </el-col>
                    <el-col :span="4">
						<el-form-item prop="cities">
                            <el-select v-model="Detail.cities" placeholder="请选择市" @change="chooseCity" style="">
                                <el-option
						    		v-for="item in cityData"
						    		:key="item.code"
						    		:label="item.name"
						    		:value="item.name">
								</el-option>
							</el-select>
                        </el-form-item>
                    </el-col>
                    <el-col span="0.5" style="color: rgb(192, 204, 218);text-align: center;">
						<span style="color: #C0CCDA;;">—</span>
                    </el-col>
                    <el-col :span="4">
						<el-form-item prop="county">
							<el-select v-model="Detail.county" placeholder="请选择区、县" @change="chooseArea" style="">
						    	<el-option
							        v-for="item in areaData"
							        :key="item.code"
							        :label="item.name"
							        :value="item.name">
							    </el-option>
						    </el-select>
                        </el-form-item>
                    </el-col>
					<el-col span="0.5" style="color: rgb(192, 204, 218);text-align: center;">
                        <span>—</span>
                    </el-col>
					<el-col :span="9">
					    <el-form-item prop="random">
					    	<el-input v-model="Detail.random"  maxlength="50"  show-word-limit clearable placeholder="填写详细地址" ></el-input>
					    </el-form-item>
				   	</el-col>			
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="22">
				<el-form-item label="违法活动记录:" prop="records" label-width="120px" :required="reRemarkRequired">
					<el-input							
							type="textarea"
							:autosize="{ minRows: 8, maxRows: 8}"
							placeholder=""
							maxlength="500"
							show-word-limit clearable
							v-model="Detail.records">
					</el-input>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>						
			<el-col :span="22">
				<el-form-item label="附件:" prop="" label-width="120px">
					<iframe width="100%"  style="height: 270px;border: none;"  scrolling="no"   :src="link"></iframe>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="22">
				<div style="float:right;">
					<el-button type="primary" size="small" style="width: 60px;height: 30px;" @click="zcSave('Detail')">暂存</el-button>
					<el-button type="primary" size="small" style="width: 60px;height: 30px;" @click="onSubmit('Detail')">提交</el-button>
				</div>
			</el-col>
		</el-row>
	</el-form>

</div>
<script>
    var vm = new Vue({
        el: '#app',
        data() {

            return {
                uuid:'',
                link:'',//iframe链接
                
                Detail : {
                    id:"",
                    name: "",
                    sex: "",
                    phone:"",
                    province: "",
                    cities:"",
                    county:"",
                    random:"".trim(),
                    creatTime: "",
                    appealContent: "",
                    records:""
                },
                provinceData: [],
                cityData: [],
                areaData: [],
                rules: {
                    name: [{
                        required: true,
                        message: '请输入姓名',
                        trigger: 'blur'
                    }],
                    sex: [{
                        required: true,
                        message: '请选择性别',
                        trigger: 'change'
                    }],
                    phone: [{
                        required: true,
                        message: '请输入联系电话',
                        trigger: 'blur'
                    },{
                        validator: checkPhTel,
                        trigger: 'blur'
                    }],
                    province:[{
                        required: true,
                        message: '请选择省',
                        trigger: 'change'
                    }],
                    cities: [{
                        required: true,
                        message: '请选择市',
                        trigger: 'change'
                    }],
                    county: [{
                        required: true,
                        message: '请选择区、县',
                        trigger: 'change'
                    }],
                    random: [{
                        required: true,
                        message: '请填写详细地址',
                        trigger: 'blur'
                    },{
						validator : trimIsEmpty,
						message : '请填写详细地址',
						trigger : 'blur'
					}],
                    records: [{
                        required: true,
                        message: '请输入违法活动记录',
                        trigger: 'blur'
                    },{
                        validator : trimIsEmpty,
                        message : '请输入违法活动记录',
                        trigger : 'blur'
					},{
                        max : 500,
                        message : '请输入长度最大为500个字符',
                        trigger : 'blur'
                    }],
                    creatTime: [{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                    }]                                      
                }
            }
        },
        created(){
            var userInfo = JSON.parse(localStorage.getItem('userInfo'));
            var userRole = userInfo.orgName;            
            this.Detail.name = userInfo.loginName;
            console.log(userRole)
//          if(userRole.includes("建设单位")){
//              this.hasApprovalBtn = false;
//          }
            axios.get('../json/ChinaCity.json').then(res=>{
                this.provinceData = res.data;
            }).catch(e => {
                this.$message.error("网络连接超时");
            })
        },
        mounted(){            
            this.getUuid();
            
        },
        methods: {           
            //获取UUID的方法
            getUuid() {
                axios({
                    method: 'get',
                    url: '/dzjwgr/uuid/getUuid',
                })
                    .then(response => {
                        console.log(response);
                        if (response.data.code == 200) {
                            this.uuid = response.data.data;
                            this.link="upload/annex.html?uuid="+this.uuid+"&flag=1";
                            console.log(this.uuid);
                        } else {
                            this.$message.error(response.data.msg);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            // 暂存
            zcSave(formName) {
            	this.$refs[formName].validate((valid) => {
                    if (valid) {
		                this.Detail.id=this.uuid;
		                let date = new Date();
		                let y = date.getFullYear();
		                let MM = date.getMonth() + 1;
		                MM = MM < 10 ? ('0' + MM) : MM;
		                let d = date.getDate();
		                d = d < 10 ? ('0' + d) : d;
		                let h = date.getHours();
		                h = h < 10 ? ('0' + h) : h;
		                let m = date.getMinutes();
		                m = m < 10 ? ('0' + m) : m;
		                let s = date.getSeconds();
		                s = s < 10 ? ('0' + s) : s;
		               	console.log(y + '-' + MM + '-' + d);
		               	this.Detail.creatTime = y + '-' + MM + '-' + d;
		                axios({
		                    method: 'post',
		                    url: '/dzjwgr/appeal/zcAppeal',
		                    data: this.Detail
		                })
		                .then((response) => {
		                    let data = response.data;
		                    if (data.code == 200) {
		                        this.$message({
		                            type: 'success',
		                            message: '暂存成功!'
		                        });
		                        this.getUuid();
		                        this.clearForm();
		                    } else {
		                        this.$message.error(data.msg);
		                    }
		                });
                	} else {
                        console.log("error!!");
                        return false;
                    }
                });
            },
            // 表单提交
            onSubmit(formName) {
            	this.$refs[formName].validate((valid) => {
                    if (valid) {
		                this.Detail.id=this.uuid;
		                let date = new Date();
		                let y = date.getFullYear();
		                let MM = date.getMonth() + 1;
		                MM = MM < 10 ? ('0' + MM) : MM;
		                let d = date.getDate();
		                d = d < 10 ? ('0' + d) : d;
		                let h = date.getHours();
		                h = h < 10 ? ('0' + h) : h;
		                let m = date.getMinutes();
		                m = m < 10 ? ('0' + m) : m;
		                let s = date.getSeconds();
		                s = s < 10 ? ('0' + s) : s;
		               	console.log(y + '-' + MM + '-' + d);
		               	this.Detail.creatTime = y + '-' + MM + '-' + d;
		                axios({
		                    method: 'post',
		                    url: '/dzjwgr/appeal/addAppeal',
		                    data: this.Detail
		                })
		                .then((response) => {
		                    let data = response.data;
		                    if (data.code == 200) {
		                        this.$message({
		                            type: 'success',
		                            message: '提交成功!'
		                        });
		                        this.getUuid();
		                        this.clearForm();
		                    } else {
		                        this.$message.error(data.msg);
		                    }
		                });
                	} else {
                        console.log("error!!");
                        return false;
                    }
                });
            },
			clearForm(){
				this.$refs.Detail.resetFields();
				this.Detail.id = '';
//				this.Detail.name = '';
				this.Detail.sex = '';
				this.Detail.phone = '';
				this.Detail.province = '';
				this.Detail.cities = '';
	            this.Detail.county = '';
	            this.Detail.random = '';
				this.Detail.creatTime = '';
				this.Detail.appealContent = '';
				
            },	
        	chooseProvince(value){
	            this.Detail.cities = '';
	            this.Detail.county = '';
	            this.cityData = [];
	            this.areaData = [];
	            this.provinceData.map(e=>{//遍历数据
	                if( value == e.name){
	                    this.cityData = e.cityList;
	                    return;
	                }
	            })
	        },
	        chooseCity(value){
	            this.Detail.county = '';
	            this.cityData.map(e=>{//遍历数据
	                if( value == e.name){
	                    this.areaData = e.areaList;
	                    return;
	                }
	            })
	        },
	        chooseArea(value){
	            this.Detail.county = value;
	        }
            
        }
    })
</script>
</body>
</html>